<template>
	<!--抽奖规则组件-->
	<div class="box">
		<div class="wrap-box">
		<div class="center-box">
			<div class="top-box">
				<img @click="closeLotteryRule" src="../../assets/images/choujiang/cj-arrow.png" />
				<p>抽奖规则</p>
			</div>
			<div class="connect" v-html='ruleHtml'>				
				<!--1、关于抽奖：每位用户有X次抽奖机会，包括完成任务后的新增抽奖机会（若有）使用完之后都无法抽奖。
				2、关于有效期：请注意页面展示的奖品有效期为领取有效期，请在规定领取有效期内领取奖品。①若抽中实物奖品，请及时在有效期内填写领奖信息，若无需填写信息，请保持手机畅通等待工作人员联系您领奖事宜，若在有效期内没有填写信息或者无法联系上，则视为自动放弃奖品；②若抽中券码奖品，请及时截屏或者复制保存券码，按中奖说明操作流程兑换相应券码奖品，超出领取有效期则过期处理。
				3、奖品以页面显示为准，若中奖查询可至“返回直播首页-我的-我的奖品礼券”中查看。
				4、如用户在抽奖过程中有任何作弊、违规行为，平台有权取消该用户的中奖资格。
				5、适用范围：中国大陆地区（港澳台地区除外）
				6、本活动最终解释权归XXXX所有，如有问题，请联系XXXXX。-->
			</div>
			
		</div>
		<div class="close" @click="closeLotteryRule"></div>
		</div>
	</div>
</template>

<script>
	export  default {
		props: {
			activityId: String, //抽奖活动id
		},
		data(){
			return{
				ruleHtml:'',//抽奖规则
			}
		},
		created(){
			this.getlotteryRuleData()
		},
		methods:{
			closeLotteryRule(){
				this.$emit('formChildMsg',{
		          type:'closeLotteryRule',
		          data:'ruan'
		        })
			},
			getlotteryRuleData(){
					this.$http.get("/lotto/getLottoRule?activityId="+this.activityId).then(res => {
						if(res.data.code == "000000") {
                             this.ruleHtml = res.data.data
						}else{
							console.log('抽奖规则返回 error',res.data)
						}
					})
					.catch(response => {
						console.log(response);
					});
			}
		}
	}
</script>

<style scoped="scoped">
	.wrap-box{
		width:100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}
	.box{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1200;
	}
	.center-box{
		width: 561px;
		height: 783px;
		background: linear-gradient(-45deg, #F84848 0%, #FF7878 100%);
		border: 2px solid #FED8C0;
		border-radius: 17px;
		margin: 0 auto;
	}
	.top-box{
		width: 100%;
		height: 70px;
		/*background: sandybrown;*/
		margin-top: 26px;
		position: relative;
	}
	.top-box img{
		width: 69px;
		height: 69px;
		position: absolute;
		top: 0;
		left: 32px;
	}
	.top-box p {
		line-height: 70px;
		text-align: center;
		font-size: 38px;
		font-weight: 500;
		color: #FFFFFF;
	}
	.connect{
		width: 492px;
		height: 572px;
		background: #FFF5EE;
		border-radius: 6px;
		margin: 40px auto 0;
		overflow-y: scroll;
		color: #8E726FFF;
		font-size: 24px;
		line-height: 38px;
		padding: 35px 26px 0;
		text-align: justify;
	}
	.close {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: 346px;
	}
</style>